import React from 'react';
import { connect } from 'dva';
import BasePage from './BasePage'
import { Menu, Upload, Button, List, Space, Popconfirm } from 'antd'
import { UploadOutlined, FileTextOutlined, DeleteOutlined } from '@ant-design/icons';
import style from '../assets/less/informationLess.less'
import constant from '../constant/constant.js'
import CurrentLocation from '../components/currentLocation'
import breadArr from '../constant/breadArr'

class InformationPage extends React.Component {
    constructor(props) {
        super(props),
            this.state = {
                informationType: -1
            }
    }

    queryFile = ({ item, key, keyPath, domEvent }) => {
        this.props.dispatch({
            type: "uploadFile/queryFile",
            data: { informationType: key }
        })

        this.setState({
            informationType: key
        })
    }

    deleteFile = it => {
        this.props.dispatch({
            type:"uploadFile/deleteFile",
            data:{
                id:it.id,
                informationUrl:it.informationUrl
            }
        })

        this.props.dispatch({
            type: "uploadFile/queryFile",
            data: { informationType: this.state.informationType }
        })
    }

    renderDeleteButton = (user,information) => {
        if(user.userType == 3){
            return(
                <Popconfirm
                    title="确认是否删除此文件？"
                    onConfirm={()=>{this.deleteFile(information)}}
                >
                    <Button size='small' type='text' icon={<DeleteOutlined/>}>删除</Button>
                </Popconfirm>
            )
        }
    }

    renderInformationContent = informationType => {
        if (informationType == -1) {
            return
        }

        return (
            <div id={style.informationContent}>
                <List
                    dataSource={this.props.informationList}
                    renderItem={
                        item => (
                            <List.Item>
                                <List.Item.Meta
                                    style={{width:480}}
                                    avatar={<FileTextOutlined></FileTextOutlined>}
                                    title={<a href={constant.serverUrl + item.informationUrl}>{item.informationTitle}</a>}
                                    description={item.informationAbstract}
                                >
                                </List.Item.Meta>
                                <Space>
                                    {item.createdAt.substring(0,10)}
                                    {this.renderDeleteButton(this.props.user,item)}
                                </Space>
                            </List.Item>
                        )
                    }
                >

                </List>
            </div>
        )
    }

    render() {
        return (
            <BasePage>
                <CurrentLocation breadArr={breadArr.InformationPage}></CurrentLocation>
                <Space size="large">
                    <div id={style.informationMenu}>
                        <Menu
                            mode="inline"
                            onClick={this.queryFile}
                        >
                            <Menu.Item key="1">验证规范</Menu.Item>
                            <Menu.Item key="2">验证指导协议</Menu.Item>
                            <Menu.Item key="3">试点计划规范性报告</Menu.Item>
                            <Menu.Item key="4">验证模板</Menu.Item>
                            <Menu.Item key="5">会议文件</Menu.Item>
                            <Menu.Item key="6">国际ETV</Menu.Item>
                            <Menu.Item key="7">其他</Menu.Item>
                        </Menu>
                    </div>
                    {this.renderInformationContent(this.state.informationType)}
                </Space>
            </BasePage>
        )
    }
}

const mapStateToProps = state => {
    let informationList = state.uploadFile.informationList
    let user = state.app.user
    return {
        informationList,
        user
    }
}

export default connect(mapStateToProps)(InformationPage);